window.onload = function(){
	var obj = document.getElementById("wrap");
	var aLi = obj.getElementsByTagName("li");
	for(i = 0; i < aLi.length; i++){
		aLi[i].timer = null;
		aLi[i].alpha = 30;
		aLi[i].onmouseover = function(){
			startMove(this,400);  //宽度动画
			// starMove(this,100)
		}
		aLi[i].onmouseout = function(){
			startMove(this,200);  //宽度动画
			// starMove(this,30);
		}
	}
}

//宽度动画
function startMove(obj,final){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (final - obj.offsetWidth)/10;
		speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); 
		if(obj.style.width == final){
			clearInterval(obj.timer);
		}else{
			obj.style.width = obj.offsetWidth + speed + "px";   
		}
	},30)
}

//透明度动画
// function starMove(obj,final){
// 	clearInterval(obj.timer);
// 	obj.timer = setInterval(function(){
// 		var speed = 0;
// 		if(obj.alpha > final){
// 			speed = -1; 
// 		}else{
// 			speed = 1;
// 		}
// 		if(obj.alpha == final){
// 			clearInterval(obj.timer);
// 		}else{
// 			obj.alpha += speed;
// 			obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
// 			obj.style.opacity = obj.alpha/100;
// 		}
// 	})
// }